<template>
  <!-- 重载表 -->
  <div class="app-container">
    <div class="app-wrap">
      <search-table ref="table" :table-loading="listLoading" :table-data="tableDataList" @query="getTableList(true)" @reset="refresh">
        <template v-slot:row> </template>
        <template v-slot:actions>
          <el-button type="primary" v-permission="'global.add'" size="mini" icon="el-icon-plus" @click="isShowTable = true">重载表</el-button>
          <el-button type="info" size="mini" icon="el-icon-refresh" @click="getTableList">刷新</el-button>
        </template>
        <template>
          <el-table-column align="center" prop="remark" label="表备注" />
          <el-table-column align="center" prop="name" label="表名" />
        </template>
        <template v-slot:footer>
          <pagination :total="currentTotal" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getTableList" />
        </template>
      </search-table>
      <!-- 导表 -->
      <el-dialog :visible.sync="isShowTable" v-if="isShowTable" title="重载表" width="45%" :before-close="handleClose" top="200px" :close-on-click-modal="false">
        <el-select class="width240" v-model="tableName" placeholder="请选择需要重载表的表名" filterable>
          <el-option :label="item.remark" :value="item.name" v-for="(item, index) in tableDataList" :key="index"/>
        </el-select>
        <span slot="footer" class="dialog-footer">
          <el-button size="medium" @click="handleClose">取 消</el-button>
          <el-button type="primary" size="medium" :loading="!isShowTable" @click="refreshTable">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { throttle } from '@/utils/index'
import {
  getRefresh,
  addRefresh,
} from '@/api/game'
import {
  GAME_TYPE
} from '@/utils/enum'
import SearchTable from '@/components/SearchTable'
export default {
  name: 'refresh',
  components: {
    SearchTable
  },
  data () {
    return {
      GAME_TYPE,
      tableDataList: [],
      listLoading: false,
      currentTotal: 0,
      isShowTable:false,
      tableName:'',
      listQuery:{
        page:1,
        size:50
      }
    }
  },
  created () {
    // this.getTableList()
  },
  activated () {
    this.getTableList()
  },
  methods: {
    // 获取全局表
    async getTableList (query) {
      let that = this,params=that.listQuery;
      if(query && !query.page){
        params.page=1
        params.size=50
      }
      that.tableDataList = [];
      that.listLoading = true;
      const response = await getRefresh({})
      if (response.code==1) {
        if (response.data) {
          that.currentTotal = response.data.length
          that.tableDataList = response.data
        }
      }else{
        that.$message.error(response.msg)
      }
      that.listLoading = false
    },
    handleClose(){
      this.isShowTable=false
      this.tableName=''
    },
    // 刷新表
    refreshTable(){
      let that = this;
      that.$confirm(`是否刷新【${this.tableLabel(that.tableName)}】表`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        addRefresh({
          table_name: that.tableName
        }).then(function (res) {
          that.handleClose()
          that.$message({
            type: 'success',
            message: '刷新成功!'
          });
        })
      }).catch(() => { });
    },
    // 活动状态
    tableLabel(cellValue){
      return (this.tableDataList.find((item) => item.name === cellValue)?.remark || "-");
    },
    // 刷新
    refresh: throttle(function () {
      this.getTableList();
    }, 2000),
  }
}
</script>

<style lang="scss" scoped>
</style>
